<template>
	<view>
		<block v-if="getCheckProductExists">
		<u-button type="warning" size="mini" @click="addCart">加入购物车</u-button>
		</block>
		<block v-else>
			<u-number-box 
			 ref="uNumber"
			:size="20" 
			:input-width="60"
			:input-height="40"
			:disabled-input="true"
			@minus="changeSkuNumMinus"
			@plus="changeSkuNumPlus"
			v-model="skuNumValue"
			:min="0"
			:max="getMax"></u-number-box>
		</block>
	</view>
</template>

<script>
	import {mapActions,mapGetters} from "vuex"
	export default {
		name:"AddToCart",
		props:{
			cartDetail:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			// 在购物车页面的时候，使用带活动的购物车将传递的不再是商品的id
			// 商品详情信息中没有id，而是skuId
			skuId:{
				type:Number,
				default:null
			}
		},
		data() {
			return {
				id:0
			};
		},
		computed:{
			...mapGetters("cartModule",["checkProductExists","getProductSkuNum"]),
			//判断当前商品是否未加入购物车
			getCheckProductExists(){
				return !this.checkProductExists(this.id)
			},
			//获取当前商品的数量
			skuNumValue:{
				get(){
					return this.getProductSkuNum(this.id)
				},
				set(value){}
			},
			//获取最大商品数量
			getMax(){
				let perLimit = this.cartDetail.perLimit;
				//秒杀商品的限制字段和和普通的不一样
				if(this.cartDetail.skuType===1){
					perLimit = this.cartDetail.seckillSkuVo &&this.cartDetail.seckillSkuVo.seckillLimit;
				}
				return perLimit
			}
		},
		methods:{
			...mapActions("cartModule",["addCartAction","changeSkuNumAction"]),
			//添加到购物车
			addCart(){
				if(this.skuId){
					// 对于只有skuId的商品添加一个id
					this.cartDetail.id = this.skuId
				}
				this.addCartAction(this.cartDetail)
			},
			//给购物车数量减1
			changeSkuNumMinus(e){
			this.changeSkuNumAction({
				skuId:this.id,
				value:-1,
				currentBuyNum:e.value
			})
			},
			//给购物车数量加1
			changeSkuNumPlus(e){
				//e.value是input的值
				this.changeSkuNumAction({
					skuId:this.id,
					value:1,
					currentBuyNum:e.value//用来判断当前值是否临界
				})
			}
		},
		watch:{
			skuId:{
				handler(newval,oldval){
					if(newval){
						this.id = newval
					}else{
						this.id = this.cartDetail.id
					}
				},
				immediate:true
			}
		}
		
	}
</script>

<style lang="scss">

</style>
